<template>
  <el-table :data="tableData" style="width: 100% , height:80">
    <el-table-column type="index" label="序号" width="80"> </el-table-column>
    <el-table-column prop="subjectName" label="所属学科" width="180">
    </el-table-column>
    <el-table-column prop="directoryName" label="目录名称"> </el-table-column>
    <el-table-column prop="username" label="创建者"> </el-table-column>
    <el-table-column prop="addDate" label="创建日期">
      <template slot-scope="scope">
        <span>{{scope.row.addDate | formatTime}}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="state"
      :formatter="formatter"
      label="状态"
      width="100"
    >
    </el-table-column>
    <el-table-column prop="address" label="操作">
      <template slot-scope="scope">
        <!--scope.row.state=1 禁用  -->
        <el-button type="text" @click="disable(scope.row)">{{scope.row.state ? '禁用' :'启用'}}</el-button>
        <el-button type="text" :disabled="scope.row.state === 1" @click="rechange(scope.row)">修改</el-button>
        <el-button type="text" :disabled="scope.row.state === 1" @click="delDirectory(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
// 按需导入枚举
import { status } from '@/api/hmmm/constants'
import { detail, changeState, remove } from '@/api/hmmm/directorys'
import moment from 'moment'
export default {
  props: {
    tableData: {
      type: [Array],
      required: true
    }
  },
  data () {
    return {
      user: {}
    }
  },
  filters: {
    formatTime (time) {
      return moment(time).format('YYYY-MM-DD')
    }
  },
  methods: {

    // 删除按钮
    async delDirectory (data) {
      // console.log(res)
      const res = await this.$confirm('此操作将永久删除该目录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // console.log(res)
      if (res === 'cancel') return this.$message('已取消删除')
      await remove(data)
      this.$message.success('删除项目成功！')
      this.$emit('del')
    },

    // 编辑按钮
    rechange (data) {
      this.$emit('rechange', data)
    },

    // 处理枚举数据
    formatter (row, column, cellValue, index) {
      // console.log(status)
      const obj = status.find((item) => item.value === cellValue)
      return obj ? obj.label : '未知'
    },

    // 禁用启用按钮
    async disable (a) {
      // console.log(a)
      const res = await detail(a)
      // console.log(res)
      this.user = res.data
      // console.log(this.user.state)
      if (this.user.state === 1) {
        this.user.state = 0
        await changeState(this.user)
        // console.log(await changeState(this.user))
        this.$emit('del')
        this.$message.success('已禁用')
      } else {
        this.user.state = 1
        await changeState(this.user)
        // console.log(await changeState(this.user))
        this.$emit('del')
        this.$message.success('已启用')
      }
    }
  }
}
</script>

<style scoped lang='less'>
</style>
